<template>
  <div style="width: 100%; height: 100%;">
    <ECharts 
      :options="chartOptions" 
      autoresize
      ref="echartRef"
      style="width: 100%; height: 500px;" 
    />
  </div>
</template>

<script>
import ECharts from "vue-echarts";
import * as echarts from "echarts";

export default {
  name: 'CommonEcharts',
  components: { ECharts },
  data() {
    return {
      chartType: 'bar'
    }
  },

  beforeMount() {
    this.url = this.chartOptions.url
      // 根据 query_data 获取数据
      if(this.url){
        this.updateData(this.url.params)
      }
  },
  
  
   props: {
    chartOptions: {
      type: Object,
      required: true,
      default: () => null
      },
      params: {
      type: String,
      default: null,
      required: false
    },

      /**
       * {
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "cross" },
        },
        toolbox: {
          show: true,
          right: 30,
          feature: {
            magicType: {
              show: true,
              type: ["line", "bar"],
              title: {
                line: "切换为折线图",
                bar: "切换为柱状图"
              }
            },
            restore: { show: true, title: "还原" },
            saveAsImage: { show: true, title: "保存图片" }
          }
        },
        brush: [
          {
            type: 'lineX',          // 横向选择
            xAxisIndex: 0,
            brushLink: 'all',
            outOfBrush: { colorAlpha: 0.1 },
            throttleType: 'debounce',
            throttleDelay: 200
          }
        ],
        dataZoom: [
          { type: 'inside', xAxisIndex: 0 }
        ],
        legend: {
          data: ["订单量", "销售额"],
          top: 25,
          left: "center",
          textStyle: { fontSize: 14 },
        },
        grid: {
          top: "90px",
          left: "60px",
          right: "60px",
          bottom: "30px",
        },
        xAxis: {
          type: "category",
          boundaryGap: true,  // 让柱子占满格子
          data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
        },
        yAxis: [
          {
            type: "value",
            name: "订单量",
            position: "left",
            axisLine: { lineStyle: { color: "#5470C6" } },
          },
          {
            type: "value",
            name: "销售额（元）",
            position: "right",
            axisLine: { lineStyle: { color: "#91CC75" } },
          },
        ],
        series: [
          {
            name: "订单量",
            type: 'bar',
            yAxisIndex: 0,
            data: [484,557,519,531,555,494,421,466,603,585,587,550,497,438,363],
            itemStyle: { color: "#5470C6" },
          },
          {
            name: "销售额",
            type: 'bar',
            yAxisIndex: 1,
            data: [16608.12,20169.36,18199.74,18979.11,20419.49,18314.63,13982.72,15878.01,21990.26,21507.09,21706.02,19129.86,18309.61,15559.03,12478.18],
            itemStyle: { color: "#91CC75" },
          },
        ],
      }
       */
  },
    watch: {
    params: {
      handler(newVal) {
        if(newVal){
          this.updateData(newVal)
        }
      },
      deep: true
    }
  },
  methods: {
    updateData(params) {
      console.log("common_echarts...");

      // 当url不算use_table_data且有api时，echarts单独获取数据，不使用表格数据
      if(this.url.api){
        let { method, api } = this.url
        this.$http(method, params?api+params:api).then(res => {
          this.chartOptions.xAxis = res.data.xAxis
          this.chartOptions.yAxis = res.data.yAxis
          this.chartOptions.series = res.data.series
        })
      } 
      }
    
  },
  mounted() {
    const chart = this.$refs.echartRef.chart;
    chart.on('brushSelected', (params) => {
    const selectedBatch = params.batch[0].selected;
    if (!selectedBatch || selectedBatch.length === 0) return;

    const allIndex = selectedBatch.reduce((acc, cur) => {
      if (cur.dataIndex && cur.dataIndex.length > 0) {
        acc.push(...cur.dataIndex);
      }
      return acc;
    }, []);

    if (allIndex.length === 0) return;

    const start = Math.min(...allIndex);
    const end = Math.max(...allIndex);

    // 先缩放
    chart.setOption({
      dataZoom: [{ type: 'inside', startValue: start, endValue: end }]
    });

    // 清空 brush 区域
    chart.dispatchAction({
      type: 'brush',
      areas: []
    });
  });
  }
}
</script>

<style scoped>
.chart-type label {
  margin-left: 12px;
  cursor: pointer;
}

input[type="radio"] {
  margin-right: 4px;
}
</style>
